<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
<!-- 1.1 ref取名-->
<!--  <cpn ref="aaaa"></cpn>-->
<!--  <button @click="btnClick">按钮</button>-->
</div>

<template id="cpn">
  <div>
    <h2>我是cpn组件</h2>
    <ccpn></ccpn>
  </div>
</template>

<template id="ccpn">
  <div>
    <h2>我是子组件</h2>
    <button @click = 'btnClick'>按钮</button>
  </div>
</template>
  <script src="../../../project_practice/lunbotu/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:"你好啊！！"
      },
      methods:{
        btnClick(){
          //1.$children下标拿值，当需要增添组件的时候，还得回这里修改，不太方便，不常用
         // console.log(this.$children);
          // this.$children[0].showMessage();
          // this.$children[0].name;
          //for (let c of this.$children){
           // console.log(c.name);
           // c.showMessage();
         // }
          console.log(this.$refs.aaaa.name);//1.2找到名字,拿取组件里name值
        }
      },
      components:{
        cpn:{
        template : '#cpn',
          data(){
          return{
            name:"我是cpn组件的name"
          }
          },
          methods: {
            btnClick(){

              console.log(this.$parent);
            }
          },
          components: {
          ccpn:{
            template: '#ccpn',
            methods:{
              btnClick(){
                //1.子访问父组件$parent
                // console.log(this.$parent);
                // console.log(this.$parent.name)

                //2.访问根组件$root
                console.log(this.$root);
                console.log(this.$root.message)
              }
            }
          }
          }
        }
      }
    })
  </script>
</body>
</html>